<template>
  <div>
    <div class="head">
      <a-breadcrumb separator="|">
        <a-breadcrumb-item class="breadfont">
          <div style="display:inline-block;">
            <img style="width:50px;" src="static/img/cornupay_logo.gif" alt>
          </div>
        </a-breadcrumb-item>
        <a-breadcrumb-item class="breadfont" href>
          <span @click="gomanage">账户管理</span>
        </a-breadcrumb-item>
        <a-breadcrumb-item class="breadfont">我的信息</a-breadcrumb-item>
      </a-breadcrumb>
      <div class="head-right">
        <router-link
          tag="span"
          active-class="activeClass"
          v-for="(item,index) in headoptions"
          :key="item.name"
          :index="index"
          :to="item.path"
        >{{item.name}}</router-link>
      </div>
    </div>
    <div style="padding-top:50px;width:80%;margin:0 auto;">
      <router-view/>
    </div>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import GlobalFooter from "../../layouts/GlobalFooter";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";

const ATabPane = ATabs.TabPane;

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    GlobalFooter,
    ATabPane,
    ATabs,
    AForm
  },
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
          md: { span: 10 }
        }
      },
      headoptions: [
        {
          path: "/per/infoset/cominfochange",
          name: "一般信息变更"
        },
        {
          path: "/per/infoset/maininfochange",
          name: "重要信息变更"
        }
      ],
      name: "XXXXX有限公司",
      utime: "2019-05-17 14:06:47",
      memberNO: "1242353756857854",
      isSpe: false
    };
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {
    handleChange(value) {
      console.log(value);
    },
    gomanage() {
      this.$router.push("/per/accountmanage/myinfo");
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
li {
  list-style: none;
}
.head {
  height: 100px;
  display: flex;
  align-items: center;
  padding: 0 50px;
  position: relative;
  .breadfont {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    a {
      color: #333;
    }
  }
}

.head-right {
  position: absolute;
  right: 100px;
  span {
    font-size: 18px;
    font-weight: bold;
    color: #999;
    margin: 0 15px;
  }
  .activeClass {
    color: #333;
  }
}
</style>
